<template>
  <div class="page-container" v-loading="loading">
    <div class="page-content" ref="scrollEl">
      <div class="panel-container">
        <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="140px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="信息标题:" prop="title">
                <el-input autocomplete="on" name="title" v-model="formData.title" placeholder="请输入信息标题" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="0">
                <el-checkbox v-model="is_gt">个体</el-checkbox>
                <el-checkbox v-model="is_dj">独家</el-checkbox>
                <el-checkbox v-model="is_tj">推荐</el-checkbox>
                <el-checkbox v-model="is_you">优质</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="editModel === 'edit'">
            <el-col :span="24">
              <el-form-item label="发布时间:" prop="feijiu_pub_time">
                <el-date-picker v-model="detail.feijiu_pub_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" disabled> </el-date-picker>
                <el-checkbox v-model="isUseNow" style="margin-left: 20px">发布时间使用当前时间</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="所属分类:" prop="c1">
                <div class="line">
                  <el-cascader v-model="cateValue" :options="cateList" :props="{ checkStrictly: true, value: 'num_id', label: 'name' }" @change="handleCateChange" clearable></el-cascader>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="标签:" prop="key_words" class="form-keyword">
                <el-checkbox-group v-model="selectedKeywordList" size="mini">
                  <el-checkbox v-for="(item, index) in keywordList" :key="index" :label="item">
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="newMarksList.length > 0">
              <el-form-item label="">
                <el-tag v-for="item in newMarksList" :key="item.id" disable-transitions closable style="margin-right: 6px; margin-bottom: 4px" @close="handleTagDelete(item)">
                  {{ item.name }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="信息图片:" prop="images">
                <ImageDraggable ref="imageDraggable" infoType="asset" @change="handleImagesChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="15s短视频:" prop="video_url">
                <VideoUpload ref="videoUpload" @change="handleVideoChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="信息介绍:" prop="desc">
                <el-switch active-text="信息图片及短视频一键填充" v-model="fullImagesAndVideo" @change="handleFullImagesAndVideo"></el-switch>
              </el-form-item>
              <el-form-item label="">
                <TinyMCE ref="tinymce" v-model="formData.desc" :height="500" infoType="asset" :key="'assetPublish' + tinymceFlag" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="数量:" prop="vol">
                <el-input autocomplete="on" name="vol" v-model="formData.vol" placeholder="请输入数量" type="number" :style="{ width: '100%' }"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="0" prop="unit">
                <div class="line">
                  <el-radio-group v-model="formData.unit" size="mini">
                    <el-radio v-for="(item, index) in unitList" :key="index" :label="item">{{ item }}</el-radio>
                  </el-radio-group>
                  <el-input v-model="inputUnit" placeholder="自定义单位" clearable style="width: 20%; margin: 0 10px"> </el-input>
                  <el-button type="text" icon="el-icon-plus" size="mini" @click="handleUnitAdd"> 添加 </el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所在地:" prop="shi_id">
                <AreaSelect ref="areaSelect" :list="areaList" @change="handleAreaChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="价值等级:" prop="value">
                <el-radio-group v-model="formData.value" size="mini">
                  <el-radio v-for="(item, index) in valueList" :key="index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="估值:" prop="valuation">
                <el-radio-group v-model="formData.valuation" size="mini">
                  <el-radio v-for="item in valuationList" :key="item.value" :label="item.value" :disabled="item.disabled">{{ item.key }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="信息来源:" prop="source">
                <el-radio-group v-model="formData.source" size="mini">
                  <template v-for="(item, index) in sourceList">
                    <el-radio :key="'radio' + index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                    <a class="link" v-if="editModel === 'edit' && formData.source === 6 && item.value === 6" :key="'a' + index" :href="spiderUrl" target="_blank">{{ spiderUrl }}</a>
                  </template>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="电话审核:" prop="is_check">
                <el-radio-group v-model="formData.is_check" size="mini">
                  <el-radio v-for="(item, index) in checkList" :key="index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="前台状态:" prop="front_sts" label-width="80px">
                <el-radio-group v-model="formData.front_sts" size="mini">
                  <el-radio v-for="(item, index) in frontStsList" :key="index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="editModel === 'edit'" label-width="80px">
              <el-form-item label="锁定状态:" prop="is_lock">
                <el-radio-group v-model="formData.is_lock" size="mini">
                  <el-radio v-for="(item, index) in lockList" :key="index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form-panel">
            <div class="title">发布人信息</div>
            <div class="desc">
              <span class="red"> * </span>
              联系电话至少填一个
            </div>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="手机号:" prop="user_phone">
                  <el-input autocomplete="on" name="user_phone" v-model="formData.user_phone" placeholder="请输入发布人手机号" clearable :style="{ width: '100%' }" @blur="handlePhoneBlur" @input="handleInput($event, 'user_phone')"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="12">
                <el-button type="text" size="mini" @click="handleView('user_phone', '资产')" :disabled="!formData.user_phone" title="请输入发布人手机号">
                  查看发布过的资产信息
                  <span v-if="formData.user_phone"> ({{ publishedAssets.user_phone }}) </span>
                </el-button>
                <el-button type="text" size="mini" @click="handleView('user_phone', '独享')" :disabled="!formData.user_phone" title="请输入发布人手机号"> 查看发布过的独享信息 </el-button>
                <el-button type="text" size="mini" @click="handleSearch('user_phone')"> 搜索联系方式 </el-button>
                <el-button type="text" size="mini" @click="handle58('user_phone')" :disabled="is58('user_phone')" title="信息来源为AI采集且地址中含有58.com时可用"> 同步58账号 </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="座机号/次要手机号:" prop="user_tel">
                  <el-input autocomplete="on" name="user_tel" v-model="formData.user_tel" placeholder="请输入座机号/次要手机号" clearable :style="{ width: '100%' }" @input="handleInput($event, 'user_tel')"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="12">
                <el-button type="text" size="mini" @click="handleView('user_tel', '资产')" :disabled="!formData.user_tel" title="请输入座机号/次要手机号">
                  查看发布过的资产信息
                  <span v-if="formData.user_tel"> ({{ publishedAssets.user_tel }}) </span>
                </el-button>
                <el-button type="text" size="mini" @click="handleView('user_tel', '独享')" :disabled="!formData.user_tel" title="请输入座机号/次要手机号"> 查看发布过的独享信息 </el-button>
                <el-button type="text" size="mini" @click="handleSearch('user_tel')"> 搜索联系方式 </el-button>
                <el-button type="text" size="mini" @click="handle58('user_tel')" :disabled="is58('user_tel')" title="信息来源为AI采集且地址中含有58.com时可用"> 同步58账号 </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="其他联系方式:" prop="other_ways">
                  <el-input autocomplete="on" name="other_ways" v-model="formData.other_ways" placeholder="请输入其他联系方式" clearable :style="{ width: '100%' }" @input="handleInput($event, 'other_ways')"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="12">
                <el-button type="text" size="mini" @click="handleView('other_ways', '资产')" :disabled="!formData.other_ways" title="请输入其他联系方式">
                  查看发布过的资产信息
                  <span v-if="formData.other_ways"> ({{ publishedAssets.other_ways }}) </span>
                </el-button>
                <el-button type="text" size="mini" @click="handleView('other_ways', '独享')" :disabled="!formData.other_ways" title="请输入其他联系方式"> 查看发布过的独享信息 </el-button>
                <el-button type="text" size="mini" @click="handleSearch('other_ways')"> 搜索联系方式 </el-button>
                <el-button type="text" size="mini" @click="handle58('other_ways')" :disabled="is58('other_ways')" title="信息来源为AI采集且地址中含有58.com时可用"> 同步58账号 </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="12" :lg="24">
                <el-form-item label="处置周期:" prop="cycle">
                  <el-radio-group v-model="formData.cycle" size="mini">
                    <el-radio v-for="item in cycleList" :key="item.value" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="姓名:" prop="user_name">
                  <el-input autocomplete="on" name="user_name" v-model="formData.user_name" placeholder="请输入姓名" maxlength="32" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="12">
                <el-form-item label="公司名称:" prop="company_name">
                  <el-input autocomplete="on" name="company_name" v-model="formData.company_name" placeholder="请输入公司名称" maxlength="32" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="12">
                <el-form-item label="公司地址:" prop="com_shi_id">
                  <AreaSelect ref="areaSelectCom" :list="areaList" @change="handleComAreaChange" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="12">
                <el-form-item label="详细地址:" prop="com_address">
                  <el-input autocomplete="on" name="com_address" v-model="formData.com_address" placeholder="请输入详细地址" maxlength="32" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="所属行业:" prop="industry_id">
                  <el-select v-model="formData.industry_id" placeholder="请选择" clearable :style="{ width: '100%' }" @change="handleIndustryChange">
                    <el-option v-for="(item, index) in industryList" :key="index" :label="item.key" :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="备注:" prop="remark">
                  <el-input autocomplete="on" name="remark" v-model="formData.remark" placeholder="请输入备注" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
    <div class="fixed-container">
      <div class="fixed-content">
        <div class="panel-container">
          <div class="panel-content" v-show="editModel === 'add'">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit">发布</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit('next')">发布并创建下一条</el-button>
          </div>
          <div class="panel-content" v-show="editModel === 'edit'">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button v-if="formData.power_sts !== 4" size="mini" type="danger" @click="handleDelete" :disabled="!(detail.accept_man_id === '' || detail.accept_man_id === currentUserId)">删除</el-button>
            <el-button v-if="formData.power_sts === 3" size="mini" type="warning" @click="handleReturn">撤回至待审核</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit">发布</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit('next')">发布并编辑下一条</el-button>
          </div>
        </div>
      </div>
    </div>

    <!--  删除 -->
    <el-dialog title="删除" :visible.sync="showDialogDelete">
      <DialogDelete :id="formData.id" :phone="formData.user_phone" v-if="showDialogDelete" @close="showDialogDelete = false" @success="handleDeleteSuccess" />
    </el-dialog>

    <!--  搜索联系方式 -->
    <el-dialog title="搜索联系方式" :visible.sync="showDialogSearch" width="80%">
      <DialogSearch :id="formData.id" :source="formData.source" :phone="searchPhone" v-if="showDialogSearch" @close="showDialogSearch = false" />
    </el-dialog>

    <!--  查看发布过的资产信息 -->
    <el-dialog title="查看发布过的资产信息" :visible.sync="showDialogAssets" width="60%">
      <DialogAssets :phone="publishedPhone" v-if="showDialogAssets" @close="showDialogAssets = false" />
    </el-dialog>

    <!--  查看发布过的独享信息 -->
    <el-dialog title="查看发布过的独享信息" :visible.sync="showDialogAlone" width="60%">
      <DialogAlone :phone="publishedPhone" v-if="showDialogAlone" @close="showDialogAlone = false" />
    </el-dialog>
  </div>
</template>
<script>
import { apiAssetPhoneCount, apiAssetAdd, apiAssetDetail, apiAssetEditGetNext, apiAssetBaseInfo, apiAssetReturn, apiAssetEdit, apiAssetKeyWords, apiAssetFindByPhone, apiGetAllLabel, apiAssetReport58Info, apiSelectCateToIndus } from '@/api/assetsPublic'
import TinyMCE from '@/components/TinyMCE7'
import ImageDraggable from '@/components/audio/ImageDraggable.vue'
import VideoUpload from '@/components/audio/VideoUpload.vue'
import AreaSelect from '@/components/AreaSelect.vue'
import { isMobile } from '@/utils/validate'
import DialogDelete from './components/DialogDelete.vue'
import DialogSearch from './components/DialogSearch.vue'
import DialogAssets from './components/DialogAssets.vue'
import DialogAlone from './components/DialogAlone.vue'

export default {
  name: 'AssetPublish',
  components: { TinyMCE, ImageDraggable, VideoUpload, AreaSelect, DialogDelete, DialogSearch, DialogAssets, DialogAlone },
  props: [],
  data() {
    var validaMobile = (rule, value, callback) => {
      if (value && !isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    var validaMobile2 = (rule, value, callback) => {
      if (value && !/^[0-9-]*$/.test(value)) {
        callback(new Error('请输入数字、-'))
      } else {
        callback()
      }
    }
    var validaMobile3 = (rule, value, callback) => {
      if (value && !/^[0-9a-zA-Z_-]*$/.test(value)) {
        callback(new Error('请输入数字、字母、下划线、-'))
      } else {
        callback()
      }
    }
    var validaMobileRequired = (rule, value, callback) => {
      if (!this.formData.user_phone && !this.formData.user_tel && !this.formData.other_ways) {
        callback(new Error('联系方式至少填写一个'))
      } else {
        callback()
      }
    }
    return {
      tinymceFlag: 1,
      showDialogDelete: false,
      searchPhone: '',
      showDialogSearch: false,
      publishedPhone: '',
      showDialogAssets: false,
      showDialogAlone: false,
      queryId: '',
      tableQuery: {},
      loading: false,
      editModel: 'add',
      spiderUrl: '',
      formData: {
        title: '',
        desc: '',
        user_name: '',
        user_phone: '',
        user_tel: '',
        other_ways: '',
        cycle: 1,
        is_check: 2,
        sheng_id: '',
        shi_id: '',
        zone_id: '',
        c1: '',
        c2: '',
        vol: '',
        unit: '台',
        images: [],
        video_url: '',
        key_words: '',
        new_marks: '',
        value: 1,
        valuation: 8,
        is_gt: 0,
        is_dj: 0,
        is_tj: 0,
        is_you: 0,
        company_name: '',
        com_sheng_id: '',
        com_shi_id: '',
        com_zone_id: '',
        com_address: '',
        industry_id: '15',
        remark: '',
        industry: '中小企业及其它',
        source: 1,
        front_sts: 2,
        is_lock: 1,
        is_use_now: 0,
      },
      rules: {
        title: [{ required: true, message: '请输入信息标题', trigger: 'blur' }],
        c1: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
        desc: [{ required: true, message: '请输入信息介绍', trigger: 'change' }],
        shi_id: [{ required: true, message: '请选择所在地', trigger: 'change' }],
        value: [{ required: true, message: '请选择价值等级', trigger: 'change' }],
        valuation: [{ required: true, message: '请选择估值', trigger: 'change' }],
        source: [{ required: true, message: '请选择信息来源', trigger: 'change' }],
        user_phone: [
          { validator: validaMobile, trigger: 'blur' },
          { validator: validaMobileRequired, trigger: 'blur' },
        ],
        user_tel: [
          { validator: validaMobile2, trigger: 'blur' },
          { validator: validaMobileRequired, trigger: 'blur' },
        ],
        other_ways: [{ validator: validaMobileRequired, trigger: 'blur' }],
      },
      fullImagesAndVideo: false,
      is_gt: false,
      is_dj: false,
      is_tj: false,
      is_you: false,
      inputUnit: '',
      cateValue: [],
      isUseNow: false,
      selectedKeywordList: [],
      keywordList: [],
      newMarksList: [],
      cateList: [],
      areaList: [],
      industryList: [],
      unitList: [],
      valueList: [
        {
          label: '低',
          value: 1,
        },
        {
          label: '中',
          value: 2,
        },
        {
          label: '高',
          value: 3,
        },
      ],
      valuationList: [],
      sourceList: [
        {
          label: '员工发布',
          value: 1,
          disabled: true,
        },
        {
          label: '社群',
          value: 2,
          disabled: true,
        },
        {
          label: '新媒体',
          value: 3,
          disabled: true,
        },
        {
          label: '独享公开',
          value: 5,
          disabled: true,
        },
        {
          label: 'AI采集',
          value: 6,
          disabled: true,
        },
        {
          label: '用户发布',
          value: 7,
          disabled: true,
        },
      ],
      checkList: [
        {
          label: '未核实',
          value: 1,
        },
        {
          label: '已核实',
          value: 2,
        },
      ],
      frontStsList: [
        {
          label: '处置中',
          value: 2,
          disabled: false,
        },
        {
          label: '已成交',
          value: 3,
          disabled: true,
        },
        {
          label: '已失效',
          value: 4,
          disabled: true,
        },
      ],
      lockList: [
        {
          label: '已锁定',
          value: 2,
          disabled: true,
        },
        {
          label: '未锁定',
          value: 1,
          disabled: true,
        },
      ],
      cycleList: [
        {
          label: '一次性',
          value: 1,
          disabled: false,
        },
        {
          label: '长期-月',
          value: 2,
          disabled: false,
        },
        {
          label: '长期-季度',
          value: 3,
          disabled: false,
        },
        {
          label: '长期-年',
          value: 4,
          disabled: false,
        },
      ],
      detail: {},
      currentUserId: '',
      publishedAssets: {
        user_phone: 0,
        user_tel: 0,
        other_ways: 0,
      },
      timer: null,
    }
  },
  computed: {},
  watch: {
    selectedKeywordList() {
      this.formData.key_words = this.selectedKeywordList
    },
    newMarksList() {
      this.formData.new_marks = this.newMarksList.map((item) => JSON.stringify(item)).join('|')
    },
    is_gt() {
      this.is_gt ? (this.formData.is_gt = 1) : (this.formData.is_gt = 0)
    },
    is_dj() {
      this.is_dj ? (this.formData.is_dj = 1) : (this.formData.is_dj = 0)
    },
    is_tj() {
      this.is_tj ? (this.formData.is_tj = 1) : (this.formData.is_tj = 0)
    },
    is_you() {
      this.is_you ? (this.formData.is_you = 1) : (this.formData.is_you = 0)
    },
    isUseNow() {
      this.isUseNow ? (this.formData.is_use_now = 1) : (this.formData.is_use_now = 0)
    },
  },
  activated() {
    this.tinymceFlag++
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.currentUserId = localStorage.getItem('feijiu_user_id')
      this.getSelectList().then(() => {
        this.queryId = this.$route.query.id
        if (this.queryId) {
          this.editModel = 'edit'
          const tableQuery = window.localStorage.getItem('asset-edit-table-query')
          if (tableQuery) {
            this.tableQuery = JSON.parse(tableQuery)
            this.tableQuery.is_next = 1
          } else {
            this.tableQuery = {}
            this.tableQuery.position = 1
            this.tableQuery.is_next = 1
          }
          this.sourceList.forEach((item) => {
            item.disabled = true
          })
          this.frontStsList.forEach((item) => {
            if (item.label === '已失效') item.disabled = false
          })
          this.getDetail()
        } else {
          this.editModel = 'add'
          const sourceDisabled = ['独享公开', 'AI采集', '用户发布']
          this.sourceList.forEach((item) => {
            if (!sourceDisabled.includes(item.label)) {
              item.disabled = false
            }
          })
        }
      })
    },
    // 获取详情
    getDetail() {
      this.loading = true
      apiAssetDetail({ id: this.queryId })
        .then((res) => {
          this.loading = false
          this.setDetail(res.data)
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取下一条详情
    getNextDetail() {
      this.loading = true
      // 待审核和已删除状态下，当前条发布状态改变，当前位置被下一条替代，位置不用加
      if (this.tableQuery.power_sts !== 2 && this.tableQuery.power_sts !== 4) {
        this.tableQuery.position++
      }
      apiAssetEditGetNext(this.tableQuery)
        .then((res) => {
          this.loading = false
          this.resetForm()
          this.setDetail(res.data)
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 设置详情数据
    setDetail(data) {
      this.detail = data
      for (let key in this.formData) {
        if (key === 'industry_id' || key === 'industry') {
          if (parseInt(data.industry_id) === 0) {
            continue
          } else {
            this.formData.industry_id = data.industry_id.toString()
            this.formData.industry = data.industry
          }
        } else {
          this.formData[key] = data[key]
        }
      }
      this.formData.id = data.id
      this.formData.is_lock = data.is_lock
      this.formData.power_sts = data.power_sts
      this.spiderUrl = data.spider_url

      this.formData.is_gt && (this.is_gt = true)
      this.formData.is_dj && (this.is_dj = true)
      this.formData.is_tj && (this.is_tj = true)
      this.formData.is_you && (this.is_you = true)
      if (this.formData.c2) {
        this.cateValue = [this.formData.c1, this.formData.c2]
      } else {
        this.cateValue = [this.formData.c1]
      }
      let keywordList = []
      if (this.formData.key_words) {
        keywordList = this.formData.key_words.split(',')
      }
      this.handleCateChange(this.cateValue).then((res) => {
        this.selectedKeywordList = keywordList
      })
      this.newMarksList = this.formData.new_marks
      this.$refs.imageDraggable.setValue(this.formData.images)
      this.$refs.videoUpload.setValue(this.formData.video_url)
      this.$refs.tinymce.setValue(this.formData.desc)
      this.$refs.areaSelect.setValue([this.formData.sheng_id, this.formData.shi_id, this.formData.zone_id])
      this.$refs.areaSelectCom.setValue([this.formData.com_sheng_id, this.formData.com_shi_id, this.formData.com_zone_id])
      // 待审核数据编辑时，如果公司名称和地址为空，按所在地填充
      if (this.formData.power_sts === 2) {
        const area = [this.formData.sheng_id, this.formData.shi_id, this.formData.zone_id]
        if (this.formData.company_name === '') {
          const areaName = this.getAreaName(area)
          if (areaName.length === 1) {
            this.formData.company_name = areaName[0] + '地区某公司'
          } else if (areaName.length > 1) {
            this.formData.company_name = areaName[1] + '地区某公司'
          }
        }
        if (this.formData.com_sheng_id === '') {
          this.$refs.areaSelectCom.reset()
          this.$refs.areaSelectCom.setValue(area)
        }
      }
      this.handleInput('', 'user_phone')
      setTimeout(() => {
        this.handleInput('', 'user_tel')
      }, 300)
      setTimeout(() => {
        this.handleInput('', 'other_ways')
      }, 600)
      this.formData.is_use_now = 0
    },
    // 获取下拉数据
    getSelectList() {
      return Promise.all([
        this.$store.dispatch('select/getCateList').then((res) => {
          this.cateList = res
        }),
        this.$store.dispatch('select/getCityList').then((res) => {
          this.areaList = res
        }),
        this.$store.dispatch('select/getIndustryList').then((res) => {
          this.industryList = res
        }),
        apiAssetBaseInfo().then((res) => {
          const { unit, value } = res.data
          this.unitList = unit
          this.valuationList = value
        }),
      ])
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.is_gt = this.is_dj = this.is_tj = this.is_you = this.fullImagesAndVideo = false
      this.inputUnit = ''
      this.cateValue = this.selectedKeywordList = this.keywordList = this.newMarksList = []
      this.$refs.imageDraggable.reset()
      this.$refs.videoUpload.reset()
      this.$refs.tinymce.reset()
      this.$refs.areaSelect.reset()
      this.$refs.areaSelectCom.reset()
      if (this.editModel === 'edit') {
        this.formData.id = ''
      }
    },
    // 删除标签
    handleTagDelete(item) {
      this.newMarksList = this.newMarksList.filter((item1) => item1.id !== item.id)
    },
    // 获取系统自动打标签
    getAllLabel() {
      return new Promise((resolve, reject) => {
        apiGetAllLabel({
          title: this.formData.title,
          content: this.formData.desc,
          c1: this.formData.c1,
          is_first_title: 1,
        })
          .then((res) => {
            this.newMarksList = res.data
            resolve()
          })
          .catch(() => {
            reject()
          })
      })
    },
    // 提交
    handleSubmit(type) {
      this.$refs['elForm'].validate((valid, message) => {
        if (!valid) {
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.loading = true
        if (this.editModel === 'add') {
          this.getAllLabel()
            .then(() => {
              apiAssetAdd(this.formData)
                .then((res) => {
                  this.loading = false
                  this.$message({
                    message: '发布成功',
                    type: 'success',
                  })
                  setTimeout(() => {
                    if (type === 'next') {
                      this.resetForm()
                      window.scrollTo({ top: 0 })
                    } else {
                      this.handleClose()
                    }
                  }, 1000)
                })
                .catch(() => {
                  this.loading = false
                })
            })
            .catch(() => {
              this.loading = false
            })
        } else if (this.editModel === 'edit') {
          apiAssetEdit(this.formData)
            .then((res) => {
              this.loading = false
              this.$message({
                message: '发布成功',
                type: 'success',
              })
              setTimeout(() => {
                if (type === 'next') {
                  this.getNextDetail()
                  window.scrollTo({ top: 0 })
                } else {
                  this.handleClose()
                }
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    // 取消
    handleClose() {
      if (this.editModel === 'edit') {
        window.close()
      } else {
        this.$bus.$emit('assetsPublicListUpdate')
        this.$bus.$emit('closeSelectedTag', this.$route)
      }
    },
    // 删除
    handleDelete() {
      this.showDialogDelete = true
    },
    // 删除成功
    handleDeleteSuccess() {
      this.handleClose()
    },
    // 撤回至待审核
    handleReturn() {
      window.enterPreventDefault = false
      this.$confirm('确定要撤回这条信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          window.enterPreventDefault = true
          this.loading = true
          apiAssetReturn({ ids: [this.queryId] })
            .then(() => {
              this.loading = false
              this.$message({
                type: 'success',
                message: '撤回成功!',
              })
              setTimeout(() => {
                this.handleClose()
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch(() => {
          window.enterPreventDefault = true
        })
    },
    // 添加单位
    handleUnitAdd() {
      if (!this.inputUnit || this.unitList.includes(this.inputUnit)) {
        return
      }
      apiAssetBaseInfo({ unit: this.inputUnit }).then((res) => {
        this.unitList.push(this.inputUnit)
        this.inputUnit = ''
      })
    },
    // 图片变动
    handleImagesChange(value) {
      this.formData.images = value
        .filter((item) => item.status === 'success')
        .map((item) => item.onlineUrl)
        .join('|')
    },
    // 视频变动
    handleVideoChange(value) {
      this.formData.video_url = value
    },
    // 信息图片及短视频一键填充
    handleFullImagesAndVideo(value) {
      if (value) {
        let content = ''
        if (this.formData.images.length > 0) {
          this.formData.images.split('|').forEach((item) => {
            content += `<p><img src="${item}" style="width:auto;max-width:100%;height:auto" /></p>`
          })
        }
        if (this.formData.video_url) {
          content += `
            <p>
              <span class="mce-preview-object mce-object-video" contenteditable="false"
               data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen"
                data-mce-p-frameborder="no" data-mce-p-scrolling="no"
                 data-mce-p-src="${this.formData.video_url}" >
                 <div><video controls="controls" style="width:auto;max-width:100%;height:auto">
                  <source src="${this.formData.video_url}" type="video/mp4" />
                  </video></div>
              </span>
            </p>`
        }
        if (content) {
          this.$refs.tinymce.insertContent(content)
        }
        // this.$nextTick(() => {
        //   console.log(this.formData.desc, 222)
        // })
      }
    },

    // 选择分类
    handleCateChange(value) {
      return new Promise((resolve) => {
        this.selectedKeywordList = []
        value[0] ? (this.formData.c1 = value[0]) : (this.formData.c1 = '')
        value[1] ? (this.formData.c2 = value[1]) : (this.formData.c2 = '')
        if (value && value.length > 0) {
          const length = value.length
          const cate_id = value[length - 1]
          apiAssetKeyWords({
            cate_id,
            level: value.length === 1 ? 1 : 2,
            info_type: 1,
          }).then((res) => {
            this.keywordList = res.data
            resolve()
          })
        } else {
          this.keywordList = []
          resolve()
        }

        // 新发布或待审核数据，分类和发布人信息所属行业联动
        if (this.editModel === 'add' || this.formData.power_sts === 2) {
          apiSelectCateToIndus({ cate_id: value[1] ? value[1] : value[0] }).then((res) => {
            const { key, value } = res.data
            this.formData.industry_id = value
            this.formData.industry = key
          })
        }
      })
    },
    // 选择地区
    handleAreaChange(value) {
      this.formData.sheng_id = value[0]
      this.formData.shi_id = value[1]
      this.formData.zone_id = value[2]
      // 新发布或待审核数据，公司名称和地址联动
      if (this.editModel === 'add' || this.formData.power_sts === 2) {
        const areaName = this.getAreaName(value)
        if (areaName.length === 1) {
          this.formData.company_name = areaName[0] + '地区某公司'
        } else if (areaName.length > 1) {
          this.formData.company_name = areaName[1] + '地区某公司'
        } else {
          this.formData.company_name = ''
        }
        this.$refs.areaSelectCom.reset()
        this.$refs.areaSelectCom.setValue(value)
      }
    },
    // 选择公司所在地区
    handleComAreaChange(value) {
      this.formData.com_sheng_id = value[0]
      this.formData.com_shi_id = value[1]
      this.formData.com_zone_id = value[2]
    },
    getAreaName(value) {
      let name = []
      if (value[0]) {
        const sheng = this.areaList.find((item) => item.code === value[0])
        name.push(sheng.name)
        if (sheng && value[1]) {
          const shi = sheng.children.find((item) => item.code === value[1])
          name.push(shi.name)
          if (shi && value[2]) {
            const qu = shi.children.find((item) => item.code === value[2])
            name.push(qu.name)
          }
        }
      }
      return name
    },
    handleIndustryChange(value) {
      const item = this.industryList.find((item) => item.value === value)
      if (item) {
        this.formData.industry = item.key
      } else {
        this.formData.industry = ''
      }
    },
    // 输入手机号获取信息
    handlePhoneBlur() {
      if (!this.formData.user_phone) {
        return
      }
      apiAssetFindByPhone({ phone: this.formData.user_phone, flag: 1 }).then((res) => {
        const { data } = res
        for (let key in data) {
          if (data[key] !== '') {
            if (key === 'industry_id' || key === 'industry') {
              //  行业和公司地址不显示上次数据
            } else if (key in this.formData) {
              this.formData[key] = data[key]
            }
          }
        }
        //  行业和公司地址不显示上次数据
        // this.$refs.areaSelectCom.setValue([data.com_sheng_id, data.com_shi_id, data.com_zone_id])
      })
    },
    // 查看发布过的信息
    handleView(phone, type) {
      this.publishedPhone = this.formData[phone]
      if (type === '资产') {
        this.showDialogAssets = true
      } else if (type === '独享') {
        this.showDialogAlone = true
      }
    },
    // 搜索联系方式
    handleSearch(phone) {
      this.searchPhone = this.formData[phone]
      this.showDialogSearch = true
    },
    // 输入联系方式获取已发布的条数
    handleInput(e, type) {
      this.handleTrim(type)
      this.formValidate()
      if (this.formData[type] === '') {
        return
      }
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = 0
      }
      this.timer = setTimeout(() => {
        this.getPublished(type)
      }, 200)
    },
    handleTrim(type) {
      this.formData[type] = this.formData[type].replace(/\s/g, '')
    },
    getPublished(type) {
      apiAssetPhoneCount({ phone: this.formData[type] }).then((res) => {
        this.publishedAssets[type] = res.data
      })
    },
    formValidate() {
      this.$refs['elForm'].validate()
    },
    // 是否58采集的
    is58(phone) {
      if (this.formData[phone] && this.formData.source === 6 && this.spiderUrl.includes('58.com')) {
        return false
      } else {
        return true
      }
    },
    // 同步58账号
    handle58(phone) {
      window.enterPreventDefault = false
      this.$confirm(`确定将号码 ${this.formData[phone]} 同步至58账号？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          window.enterPreventDefault = true
          apiAssetReport58Info({
            post_id: this.formData.id,
            phone: this.formData[phone],
          }).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          })
        })
        .catch(() => {
          window.enterPreventDefault = true
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.form-panel {
  width: 100%;
  background: #f0f1f4;
  padding: 10px;
  border-radius: 4px;
  .title {
    padding-left: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    line-height: 28px;
    margin-bottom: 10px;
    color: #333333;
  }
  .desc {
    width: 140px;
    text-align: right;
    padding-right: 12px;
    margin-bottom: 10px;
    color: #333333;
    .red {
      color: #f56c6c;
    }
  }
}
.el-upload__tip {
  line-height: 1.2;
}
.panel-container {
  padding-bottom: 70px;
}
.fixed-container {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(100% - 140px);
  z-index: 100;
  padding: 0 10px;
  .panel-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 6px;
    margin: 0;
  }
}
.panel-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.link {
  font-size: 16px;
  color: #409eff;
  text-decoration: underline;
  margin-right: 10px;
}
.form-keyword .el-checkbox {
  width: 170px;
  margin-right: 0px;
}
</style>
